.search {
    position: relative;
    text-align: left;
}

.search-button::after {
    content: "\e901";
}

.search-button-clear {
    font-size: 18px;
}

.search-button-clear::after {
    content: "\e92f";
}

.search-result {
    position: absolute;
    top: 100%;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 5px;
    max-height: 50vh;
    width: 100%;
    color: var(--dark-gray-color);
    font-size: 15px;
    background-color: var(--white-color);
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -webkit-overflow-scrolling: touch;
}

.search-result-row + .search-result-row {
    border-top: 1px solid var(--mid-gray-color);
}

.search-result-row-link {
    display: block;
    padding: 13px 15px 8px;
}

.search-result-row-link:hover {
    color: var(--dark-gray-color);
    background-color: var(--light-gray-color);
}

.search-result-row-title {
    line-height: 1.3;
}

.search-result-row-excerpt {
    display: block;
    overflow: hidden;
    color: var(--secondary-text-color);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
